<template>
  <div class="user-content">
    <div class="user-header">
      <div class="search">
        <div class="search-user">
          充电桩昵称 <el-input style="width: 240px;height: 30px;" placeholder="请输入充电桩昵称" />
        </div>
        <div class="search-type">
          所属电站<el-select clearable placeholder="全部" style="width: 240px;height: 30px">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>
      <div class="header-btn">
        <div class="search-btn"><el-button type="primary"><el-icon>
              <Search />
            </el-icon>搜索</el-button></div>
        <div class="removals-btn"><el-button type="success"><el-icon>
              <CloseBold />
            </el-icon>重置</el-button></div>
      </div>
    </div>
    <div class="user-middle-btn">
      <el-button type="success" plain><el-icon>
          <Plus />
        </el-icon>新增</el-button>
      <el-button type="success"><el-icon>
          <Edit />
        </el-icon>修改</el-button>
      <el-button type="danger" plain><el-icon>
          <Delete />
        </el-icon>删除</el-button>
    </div>
    <div class="table-content">
      <el-table :data="tableData" :border="true" style="width: 100%;height:500px" size="large">
        <el-table-column type="selection" />
        <el-table-column prop="date" label="Date" width="200" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
      </el-table>
    </div>
    <div class="paging">
      <div class="demo-pagination-block">
        <el-pagination :page-sizes="[10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="400" />
      </div>
    </div>
  </div>
</template>

<script setup>
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

</script>

<style lang="less" scoped>
.user-content {
  padding: 10px;
  border: 1px solid #e0dbdb;
  border-radius: 5px;
  /* 圆角 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
  /* 好看的阴影效果 */
  margin: 10px;
}

.user-header {
  height: 50px;
  // border: 1px solid red;
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .search,
  .search-user,
  .search-type {
    margin-right: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .header-btn {
    display: flex;

    .search-btn {
      margin-right: 20px;
    }
  }
}

.user-middle-btn {
  margin: 10px 0px 10px 10px;
}
</style>